<template>
  <!-- 右侧设置表格属性和单元格属性的组件 -->
  <div class="tableSetting rightSetting" :style="{'height':screenHeight+'px'}" @scroll="dropDownScrollFun">
    <div class="content" :class="[isActive ? 'width200' : 'width0']">
      <!-- 表格属性 -->
      <div v-show="state === 'table'" class="tableProperty">
        <div class="title itemTop tablePropertyHead">
          <div style="padding-right: 40px;">表格属性</div>
          <div class="revokeAndRecover">
            <div class="btnCenter" title="撤销 Ctrl+Z">
              <i class="iconfont iconchexiao" style="color: #7D8999;" :class="{'repealDisabled':repealDisabled,'btnColor':!repealDisabled}" @click="repeal" />
            </div>
            <div class="revoke" />
            <div class="btnCenter" title="还原 Ctrl+Y">
              <i class="iconfont iconzhongzuo" style="color: #7D8999;" :class="{'restoreDisabled':restoreDisabled,'btnColor':!restoreDisabled}" @click="restore" />
            </div>
          </div>
        </div>
        <!-- <div class="settingItem border" style="text-align: center">
          <el-button type="primary" :disabled="repealDisabled" >撤销</el-button>
          <el-button type="primary" :disabled="restoreDisabled" >还原</el-button>
        </div> -->
        <div class="settingItem border clearfix tablePropertyHead">
          <div class="tableBase" style="width: 45%;">
            <div class="baseTittle">行数</div>
            <el-input-number
              v-model="tableProperty.bodyRowNum"
              controls-position="right"
              class="rowColInput"
              :min="1"
              :max="tableProperty.rowMax"
              @keyup.enter.native="creat"
              @change="tablePropertyChange($event, 'bodyRowNum')"
            />
          </div>
          <div class="tableBase" style="width: 45%;">
            <div class="baseTittle">列数</div>
            <el-input-number
              v-model="tableProperty.colNum"
              controls-position="right"
              class="rowColInput"
              :min="1"
              :max="tableProperty.colMax"
              @keyup.enter.native="creat"
              @change="tablePropertyChange($event, 'colNum')"
            />
          </div>
          <div class="tableBase tableInit" title="初始化表格">
            <div class="creatCenter">
              <i class="iconfont icon_GJZshengchengbiaoge creatColor" @click="creat" />
            </div>
          </div>
          <!-- <div class="tableBtn">
            <el-button type="primary">初始化表格</el-button>
          </div> -->
        </div>
        <div class="settingItem border">
          <!-- 表格扩展属性顶部区域 -->
          <slot name="tableExtendedPropertyTop" :data="{tableProperty:tableProperty}" />
          <div class="borderWidth d-flex a-center">
            <span style="width: 40%;">边框线粗细</span>
            <div class="tableBase" style="width:50%;margin-left: 5px;">
              <div style="cursor: default;width: 100%;" class="align-center">
                <div :class="[tableProperty.borderSize==='0.5'?'select-color':'unSelect-color']" class="font-center" style="display: block;" @click="tablePropertyChange('0.5','borderSize')">
                  <div class="alignCenter alignBottom">
                    <div class="smallSquare1" />
                    <div class="smallSquare2" />
                  </div>
                  <div class="alignCenter">
                    <div class="smallSquare3" />
                    <div class="smallSquare4" />
                  </div>
                </div>
                <div :class="[tableProperty.borderSize==='1'?'select-color':'unSelect-color']" class="font-center" style="display: block;" @click="tablePropertyChange('1','borderSize')">
                  <div class="alignCenter alignBottom">
                    <div class="mediumSquare1" />
                    <div class="mediumSquare2" />
                  </div>
                  <div class="alignCenter">
                    <div class="mediumSquare3" />
                    <div class="mediumSquare4" />
                  </div>
                </div>
                <div :class="[tableProperty.borderSize==='2'?'select-color':'unSelect-color']" class="font-center" style="display: block;" @click="tablePropertyChange('2','borderSize')">
                  <div class="alignCenter alignBottom">
                    <div class="largeSquare1" />
                    <div class="largeSquare2" />
                  </div>
                  <div class="alignCenter">
                    <div class="largeSquare3" />
                    <div class="largeSquare4" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex a-center space" style="line-height: 25px">
            <span>高度自适应</span>
            <el-switch v-model="tableProperty.heightAdaptive" style="margin-left: 12px" class="drawer-switch" @change="tablePropertyChange($event, 'heightAdaptive')" />
          </div>
        </div>
        <div class="settingItem" :class="{'border':!tablePropertyHidden.includes('cellFill')}">
          <div v-show="mode === 'easy'" class="d-flex a-center space">
            <span>表头填充色</span>
            <el-color-picker
              v-model="tableProperty.headerFill"
              @change="colorChange($event, 'headerFill', 'table')"
              @active-change="activeChange($event, 'headerFill', 'table')"
            />
            <span>{{ rgbaToHex(tableProperty.headerFill) }}</span>
          </div>

          <div v-show="!tablePropertyHidden.includes('cellFill')" class="d-flex a-center space">
            <span>单元格填充</span>
            <el-color-picker
              v-model="tableProperty.cellFill"
              :predefine="predefine"
              show-alpha
              @change="colorChange($event, 'cellFill', 'table')"
              @active-change="activeChange($event, 'cellFill', 'table')"
            />
            <span>{{ rgbaToHex(tableProperty.cellFill) }}</span>
          </div>
          <div v-show="!tablePropertyHidden.includes('rowBorderColor')" class="d-flex a-center space">
            <span>横向边框线</span>
            <el-color-picker
              v-model="tableProperty.rowBorderColor"
              :predefine="predefine"
              show-alpha
              @change="colorChange($event, 'rowBorderColor', 'table')"
              @active-change="activeChange($event, 'rowBorderColor', 'table')"
            />
            <span>{{ rgbaToHex(tableProperty.rowBorderColor) }}</span>
          </div>
          <div v-show="!tablePropertyHidden.includes('colBorderColor')" class="d-flex a-center space">
            <span>纵向边框线</span>
            <el-color-picker
              v-model="tableProperty.colBorderColor"
              :predefine="predefine"
              show-alpha
              @change="colorChange($event, 'colBorderColor', 'table')"
              @active-change="activeChange($event, 'colBorderColor', 'table')"
            />
            <span>{{ rgbaToHex(tableProperty.colBorderColor) }}</span>
          </div>
          <div v-show="!tablePropertyHidden.includes('color')" class="d-flex a-center space">
            <span>文本颜色&emsp;</span>
            <el-color-picker
              v-model="tableProperty.color"
              :predefine="predefine"
              show-alpha
              @change="colorChange($event, 'color', 'table')"
              @active-change="activeChange($event, 'color', 'table')"
            />
            <span>{{ rgbaToHex(tableProperty.color) }}</span>
          </div>
        </div>
        <div v-if="tablePropertyShow('isPage')" class="settingItem space vertically">
          <span class="pr18">表格分页</span>
          <el-switch v-model="tableProperty.isPage" class="drawer-switch" @change="tablePropertyChange($event, 'isPage')" />
          <el-tooltip
            :disabled="false"
            content="表格是否开启分页,开启后默认每页为当前设置的行数"
            placement="top"
            effect="dark"
          >
            <span
              v-popover:popover1
              class="link-black tablePaging"
              <i
              class="el-icon-question"
            />
            </span>
          </el-tooltip>
        </div>
        <!-- 表格扩展属性底部区域 -->
        <slot name="tableExtendedProperty" :data="{mode:mode,treeData:treeData}" />
      </div>
      <!-- 单元格属性 -->
      <div v-if="state === 'cell'" class="cellProperty">
        <div class="title itemTop tablePropertyHead">
          <div style="padding-right: 40px;">单元格属性</div>
          <div class="revokeAndRecover" style="width: 15%;" title="返回">
            <div class="btnCenter">
              <i class="iconfont iconfanhui2 btnColor" @click="backTable({ type: 'table' })" />
            </div>
          </div>
        </div>
        <div class="settingItem border clearfix" style="display: inline-block">
          <div class="tableBase d-flex a-center cellIncrease">
            <span>单元格宽度</span>
            <div class="headerTime">
              <el-input v-model="cellProperty.tableCellWidth" style="width:70%" type="number" class="remove-arrow" :max="100" :min="1" @input="changeInputHeightWidth($event, 'tableCellWidth')" />
              <div class="today">%</div>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>单元格高度</span>
            <div class="headerTime">
              <el-input v-model="cellProperty.tableCellHeight" style="width:70%" type="number" class="remove-arrow" :max="2000" :min="1" @input="changeInputHeightWidth($event, 'tableCellHeight')" />
              <div class="today">px</div>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>单元格填充</span>
            <div class="tableBase">
              <el-color-picker
                v-model="cellProperty.cellFill"
                :predefine="predefine"
                show-alpha
                style="margin: 0;"
                @change="colorChange($event, 'cellFill')"
                @active-change="activeChange($event, 'cellFill')"
              />
              <span>{{ rgbaToHex(cellProperty.cellFill) }}</span>
            </div>
          </div>
          <!-- <div class="tableBase d-flex a-center cellIncrease bottomLine">
            <span>上边框颜色</span>
            <div class="tableBase">
              <el-color-picker
                v-model="cellProperty.topBorderColor"
                :predefine="predefine"
                show-alpha
                style="margin: 0;"
                @change="colorChange($event, 'topBorderColor')"
                @active-change="activeChange($event, 'topBorderColor')"
              />
              <span>{{ rgbaToHex(cellProperty.topBorderColor) }}</span>
            </div>
          </div> -->
          <div class="tableBase d-flex a-center cellIncrease">
            <span>下边框颜色</span>
            <div class="tableBase">
              <el-color-picker
                v-model="cellProperty.bottomBorderColor"
                :predefine="predefine"
                show-alpha
                style="margin: 0;"
                @change="colorChange($event, 'bottomBorderColor')"
                @active-change="activeChange($event, 'bottomBorderColor')"
              />
              <span v-show="rgbaToHex(cellProperty.bottomBorderColor)">{{ rgbaToHex(cellProperty.bottomBorderColor) }}</span>
              <span v-show="!rgbaToHex(cellProperty.bottomBorderColor)" style="color: #FFFFFF;">#FFFFFFFF</span>
            </div>
          </div>
          <!-- <div class="tableBase d-flex a-center cellIncrease bottomLine">
            <span>左边框颜色</span>
            <div class="tableBase">
              <el-color-picker
                v-model="cellProperty.leftBorderColor"
                :predefine="predefine"
                show-alpha
                style="margin: 0;"
                @change="colorChange($event, 'leftBorderColor')"
                @active-change="activeChange($event, 'leftBorderColor')"
              />
              <span>{{ rgbaToHex(cellProperty.leftBorderColor) }}</span>
            </div>
          </div> -->
          <div class="tableBase d-flex a-center cellIncrease bottomLine">
            <span>右边框颜色</span>
            <div class="tableBase">
              <el-color-picker
                v-model="cellProperty.rightBorderColor"
                :predefine="predefine"
                show-alpha
                style="margin: 0;"
                @change="colorChange($event, 'rightBorderColor')"
                @active-change="activeChange($event, 'rightBorderColor')"
              />
              <span v-show="rgbaToHex(cellProperty.rightBorderColor)">{{ rgbaToHex(cellProperty.rightBorderColor) }}</span>
              <span v-show="!rgbaToHex(cellProperty.rightBorderColor)" style="color: #FFFFFF;">#FFFFFFFF</span>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>文本颜色</span>
            <div class="tableBase">
              <el-color-picker
                v-model="cellProperty.color"
                :predefine="predefine"
                show-alpha
                style="margin: 0;"
                @change="colorChange($event, 'color')"
                @active-change="activeChange($event, 'color')"
              />
              <span>{{ rgbaToHex(cellProperty.color) }}</span>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>字体大小</span>
            <div class="tableBase">
              <div style="cursor: default;" class="align-center">
                <div :class="[cellProperty.size==='小'?'select-color':'unSelect-color']" style="font-size: 10px;" class="font-center" @click="selectFontSize('小','size')">
                  A
                </div>
                <div :class="[cellProperty.size==='中'?'select-color':'unSelect-color']" style="font-size: 15px;" class="font-center" @click="selectFontSize('中','size')">
                  A
                </div>
                <div :class="[cellProperty.size==='大'?'select-color':'unSelect-color']" style="font-size: 20px;" class="font-center" @click="selectFontSize('大','size')">
                  A
                </div>
              </div>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>水平对齐</span>
            <div class="tableBase">
              <div style="" class="align-center">
                <i class="iconfont iconaline-left cursorPointer" :class="[cellProperty.align==='左'?'select-color':'unSelect-color']" @click="selectBackColor('左','align')" />
                <i class="iconfont iconaline-center cursorPointer" :class="[cellProperty.align==='中'?'select-color':'unSelect-color']" @click="selectBackColor('中','align')" />
                <i class="iconfont iconaline-right cursorPointer" :class="[cellProperty.align==='右'?'select-color':'unSelect-color']" @click="selectBackColor('右','align')" />
              </div>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>垂直对齐</span>
            <div class="tableBase">
              <div style="" class="align-center">
                <i class="iconfont iconchuizhiduiqi_ding cursorPointer" :class="[cellProperty.valign==='上'?'select-color':'unSelect-color']" @click="selectBackColor('上','valign')" />
                <i class="iconfont iconchuizhiduiqi_zhong cursorPointer" :class="[cellProperty.valign==='中'?'select-color':'unSelect-color']" @click="selectBackColor('中','valign')" />
                <i class="iconfont iconchuizhiduiqi_di cursorPointer" :class="[cellProperty.valign==='下'?'select-color':'unSelect-color']" @click="selectBackColor('下','valign')" />
              </div>
            </div>
          </div>
          <div class="tableBase d-flex a-center cellIncrease">
            <span>字体样式</span>
            <div class="tableBase">
              <div style="cursor: default;" class="align-center">
                <div :class="[cellProperty.isWeight?'select-color':'unSelect-color']" style="font-size: 15px;font-weight: bold;" class="font-center" @click="weightChange('加粗','isWeight')">
                  B
                </div>
                <div :class="[cellProperty.isItalic?'select-color':'unSelect-color']" style="font-size: 15px;font-style: italic;" class="font-center" @click="italicChange('斜体','isItalic')">
                  I
                </div>
                <div :class="[cellProperty.underline?'select-color':'unSelect-color']" style="font-size: 15px;text-decoration: underline;" class="font-center" @click="underlineChange('下划线','isUnderline')">
                  U
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="cellPropertyHidden" class="title">内容</div>
        <div v-if="cellPropertyHidden" class="settingItem border" style="padding: 10px;">
          <!-- 静态or动态(拖进来的就是动态,输入的就是动态) -->
          <div v-if="cellContentShow('belongItem')" class="contentItem space"><span>所属项目：</span><span>{{ cellContent }}</span></div>
          <div v-if="cellContentShow('fieldType')" class="contentItem space"><span>字段类型：</span><span>{{ cellProperty.content.label ? '动态' : '静态' }}</span></div>
          <div v-if="cellContentShow('fieldName')" class="contentItem space"><span>字段名称：</span><span>{{ cellProperty.content.label || '无' }}</span></div>
          <div v-if="cellContentShow('fieldCode')" class="contentItem space"><span>字段编码：</span><span>{{ cellProperty.content.key || '无' }}</span></div>
          <div v-if="cellContentShow('returnType')" class="contentItem space"><span>返回类型：</span><span>{{ cellProperty.content.resultType === 2 ? '多条' : cellProperty.content.resultType === 1 ? '单条' : '无' }}</span></div>
          <div v-if="cellContentShow('showOrder')" class="contentItem space"><span>显示顺序：</span><span>{{ cellProperty.content.displayOrder }}</span></div>
        </div>
        <!-- 单元格扩展属性槽 -->
        <slot name="cellTableExtendedProperty" :data="{mode:mode,treeData:treeData,cellProperty:cellProperty}" />
      </div>
    </div>
    <div class="hamburger" @click="toggleClick">
      <i class="el-icon-arrow-left" :class="{'rotate': isActive}" />
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import * as generalTableConstant from '@/components/GeneralTable/generalTableConstant'
export default {
  components: {
    draggable
  },
  /**
	 * 分两种情况:
	 * 		1.表格属性
	 * 			简易模式与混合模式一样
	 * 		2.单元格属性
	 * 			混合模式比简易模式多了个多数据关联
	 * 			简易模式比混合模式的内容多了两行(字段编码,返回类型)
	 */
  props: {
    // 状态, table表格 cell单元格
    state: {
      type: String,
      default: 'table'
    },
    // 需要隐藏的表格属性
    tablePropertyHidden: {
      type: Array,
      default: () => []
    },
    // 需要隐藏的单元格属性
    cellPropertyHidden: {
      type: Array,
      default: () => []
    },
    // 模式, easy简易模式 blend混合模式
    mode: {
      type: String,
      default: 'easy'
    },
    // 数据树
    treeData: {
      type: Array,
      default: () => []
    },
    // 除去标题的高度
    screenHeight: {
      type: Number,
      default: 700
    },
    // 撤销禁用
    repealDisabled: {
      type: Boolean,
      default: true
    },
    // 还原禁用
    restoreDisabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      backGroundColorId: '中',
      isActive: true,			// 是否展开
      tableProperty: JSON.parse(JSON.stringify(generalTableConstant.TABLE_OPTIONS)),
      cellProperty: JSON.parse(JSON.stringify(generalTableConstant.CELL_OPTIONS)),
      tablePropertyCopy: {},
      filterResultOrderFlag: true, // 过滤排序下拉框字段标识
      dataAssocia: [], // 多数据集关联
      predefine: ['rgba(255,255,255,0)', '#FFFFFF', 'rgba(20, 0, 0, 1)'],
      dataSetResultOrder: [] // 数据集结果排序数组
    }
  },
  computed: {
    cellContent() {
      const dataSetName = this.cellProperty.content.dataSetName ? this.cellProperty.content.dataSetName.split('-')[0] : ''
      return dataSetName
    }
  },
  mounted() {
    this.tableProperty.headRowNum = 1
    this.tableProperty.bodyRowNum = 4
    this.tableProperty.colNum = 4
    this.tableProperty['isFirstCreat'] = false
    this.tablePropertyChange(false, 'isFirstCreat')
  },
  methods: {
    // 撤销
    repeal() {
      // 如果当前撤销按钮是禁用，则直接返回，不做处理
      if (this.repealDisabled) {
        return
      }
      // 操作历史记录 撤销
      this.$emit('operateHistory', 'repeal')
    },
    // 还原
    restore() {
      // 如果当前还原按钮是禁用，则直接返回，不做处理
      if (this.restoreDisabled) {
        return
      }
      // 操作历史记录 还原
      this.$emit('operateHistory', 'restore')
    },
    /**
     * 返回表格属性
     */
    backTable(e) {
      this.$parent.changeTableSeting(e)
    },
    // 下拉框滚动条监听
    dropDownScrollFun(val) {
      // 获取下拉框对象
      const scroll = document.querySelector('.rightSetting')
      /**
       * 处理div内部滚动条滚动到底部后导致 再次滚动时触发外部的滚动条
       * 处理方法为：
       * 当前内部滚动条滚动到距离底部小于等于2px时,将其滚动条位置 重置为距离底部2px
       * scrollTop: 可视区域顶部与滚动条顶部的距离
       * scrollHeight: 整个滚动条的高度
       * clientHeight: 可视区域的高度
        */
      // 当前滚动条距离底部还剩2px时
      if (scroll.scrollHeight - (scroll.scrollTop + scroll.clientHeight) <= 2) {
        // 定位到距离底部2px的位置
        scroll.scrollTop = (scroll.scrollHeight - scroll.clientHeight - 2)
      }
    },
    /**
		 * 表格属性改变触发
		 * @param {Object} $event
		 * @param {Object} key
		 */
    tablePropertyChange($event, key) {
      if (key === 'borderSize') {
        this.$set(this.tableProperty, 'borderSize', $event)
        this.$forceUpdate()
      }
      this.$emit('changeTableOptions', {
        key: key,
        value: $event
      })
    },
    /**
     * 单元格属性改变触发
     * @param {Object} $event
     * @param {Object} key
     */
    cellPropertyChange($event, key) {
      this.$emit('changeCellOptions', {
        key: key,
        value: $event
      })
    },
    /**
     * 提供一个方法给外面，更新全局的面板数据
     * @param dataObj
     */
    updatePanelData(dataObj = {}) {
      // 获取需要更改的所有的key
      const dataKeyArray = Object.keys(dataObj)
      // 遍历更改数据
      for (let i = 0; i < dataKeyArray.length; i++) {
        this.$set(this.tableProperty, dataKeyArray[i], dataObj[dataKeyArray[i]])
      }
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    /**
     * @param {Object} item
     * 回显，接收表格返回的宽高
     */
    receiveInputValue(item) {
      this.$set(this.cellProperty, 'tableCellWidth', item[0])
      this.$set(this.cellProperty, 'tableCellHeight', item[1])
      this.$set(this.cellProperty, 'td', item[2])
    },
    changeInputHeightWidth($event, key) {
      this.cellPropertyChange(Number($event), key)
    },
    selectBackColor(val, key) {
      this.cellProperty.key = val
      this.cellPropertyChange(val, key)
    },
    selectFontSize(val, key) {
      this.cellProperty.size = val
      this.cellPropertyChange(val, key)
    },
    /**
		 * 收缩展开
		 */
    toggleClick() {
      this.isActive = !this.isActive
    },
    /**
		 * 创建
		 */
    async creat() {
      const mixFun = () => {
        this.tablePropertyCopy.bodyRowNum = this.tableProperty.bodyRowNum
        this.tablePropertyCopy.colNum = this.tableProperty.colNum
        this.tableProperty['isFirstCreat'] = false
        this.tablePropertyChange(false, 'isFirstCreat')
        this.$emit('createTable', this.tableProperty)
      }
      let flag = false
      if (((this.tableProperty.bodyRowNum !== this.tablePropertyCopy.bodyRowNum ||
					this.tableProperty.colNum !== this.tablePropertyCopy.colNum) &&
					!this.tableProperty.isFirstCreat) ||
					this.tableProperty.bodyRowNum !== 1 ||
					this.tableProperty.colNum !== 4) {
        // 询问
        await this.$confirm('再次创建将重置表格,您确定吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).catch(() => {
          flag = true
          // 数据还原
          this.tableProperty.bodyRowNum = this.tablePropertyCopy.bodyRowNum
          this.tableProperty.colNum = this.tablePropertyCopy.colNum
        })
        // eslint-disable-next-line no-undef
        $('.rowColInput input').each(function(e) {
          // eslint-disable-next-line no-undef
          $(this).blur()
        })
        if (flag) return
        mixFun()
      }
      else {
        mixFun()
      }
    },
    /**
		 * 当颜色进行改变时候进行触发(只处理清空的情况)
		 * @param {Object} e
		 * @param {Object} sign
		 * @param {Object} type
		 */
    colorChange(e, sign, type = 'cell') {
      // if (!e) return
      if (!e) {
        // 清空则还原成其默认值
        const defaultColor = {
          headerFill: '#F9FAFB',
          cellFill: 'rgba(254, 254, 254, 1)',
          rowBorderColor: '#DFE6EC',
          colBorderColor: '#DFE6EC',
          color: 'rgba(20, 0, 0, 1)'
        }
        this.tableProperty[sign] = defaultColor[sign]
        if (type === 'cell') {
          this.cellPropertyChange(this.tableProperty[sign], sign === 'color' ? 'isColorChange' : sign)
        }
        else {
          this.tablePropertyChange(this.tableProperty[sign], sign)
        }
      }
      else if (type === 'cell') {
        this.cellProperty[sign] = e
        this.cellPropertyChange(e, sign)
      }
      else {
        this.tableProperty[sign] = e
        this.tablePropertyChange(e, sign)
      }
    },
    /**
		 * 面板中当前显示的颜色发生改变时触发
		 * @param {Object} e
		 * @param {Object} sign
		 * @param {Object} type
		 */
    activeChange(e, sign, type = 'cell') {
      if (type === 'cell') {
        this.cellProperty[sign] = e
        this.cellPropertyChange(e, sign)
      } else {
        this.tableProperty[sign] = e
        this.tablePropertyChange(e, sign)
      }
      this.$forceUpdate()
    },

    /**
     * @param {Object} rgba
     * rgba转换成十六进制的颜色
     */
    rgbaToHex(rgba) {
      if (!rgba) return
      if (rgba.indexOf('rgba') === -1 && rgba.length < 8) return rgba + 'FF'
      const rule = /(\d{1,3})+(?:\.\d+)?/g
      const num = (Number(rgba.match(rule)[3]) || 0) * 255
      let transparent = Number(num).toString(16).split('.')[0]
      transparent = transparent.length === 1 ? '0' + transparent : transparent
      const getArr = rgba.match(/[0-9]\d+/g) || ['255', '255', '255']
      return (('#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16)) + transparent).toLocaleUpperCase()
    },
    /**
		 * 加粗
		 */
    weightChange() {
      this.cellProperty.isWeight = !this.cellProperty.isWeight
      this.cellPropertyChange(this.cellProperty.isWeight, 'isWeight')
    },
    /**
     * 斜体
     */
    italicChange() {
      this.cellProperty.isItalic = !this.cellProperty.isItalic
      this.cellPropertyChange(this.cellProperty.isItalic, 'isItalic')
    },
    /**
     * 下划线
     */
    underlineChange() {
      this.cellProperty.underline = !this.cellProperty.underline
      this.cellPropertyChange(this.cellProperty.underline, 'underline')
    },
    // 表格属性的显示控制
    tablePropertyShow(propertyName) {
      return !this.tablePropertyHidden.includes(propertyName)
    },
    // 单元格内容显示控制
    cellContentShow(contentName) {
      // belongItem的判断
      const belongItem = contentName === 'belongItem' ? this.cellContent : true
      // showOrder的判断
      const showOrderFlag = contentName === 'showOrder' ? this.cellProperty.content.displayOrder !== null && this.cellProperty.content.displayOrder >= 0 : true
      // 单元格内容判断
      return !this.cellPropertyHidden.includes(contentName) && showOrderFlag && belongItem
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .tablePropertyHead{
    display: flex;
    justify-content: space-around;
    align-items: center;
    .revokeAndRecover{
      display: flex;
      padding: 5px 0 5px 0;
      height: 70%;
      justify-content: space-evenly;
      align-items: center;
      width: 35%;
      background: #EAECEF;
      .btnCenter{
        display: flex;
        align-items: center;
        height: 100%;
      }
      .btnColor{
        color:#7D8999 !important;
      }
      .btnColor:active{
        color:#2BABF6 !important;
      }
      .btnColor:hover{
        cursor: pointer;
        color: #2BABF6 !important;
      }
      .revoke{
        height: 100%;
        border-right: 1px solid #D7DADF;
      }
      .repealDisabled{
        cursor: no-drop;
      }
      .restoreDisabled{
        cursor: no-drop;
      }
    }
  }
  .tableInit{
    height: auto !important;
    background: #EAECEF;
    padding: 4px;
    border-radius: 5px;
    .creatCenter{
      display: flex;
      justify-content: center;
      align-items: center;
      .creatColor{
        color: #7D8999 !important;
      }
      .creatColor:active{
        color: #2BABF6 !important;
      }
      .creatColor:hover{
        cursor: pointer;
        color: #2BABF6 !important;
      }
    }
  }
  ::v-deep .el-input-number__decrease{
    width: 50%;
  }
  ::v-deep .el-input-number__increase{
    width: 50%;
  }
  .itemTop{
    position: sticky;
    top: 0;
    width:100%;
    background:#FFFFFF;
    z-index: 999;
  }
  .borderWidth{
    display: flex;
    align-items: center;
    height: 36px;
    width: 100%;
  }
  .rightSetting{
    padding-bottom: 5px;
    overflow-y:auto;
    &::-webkit-scrollbar {
      width:4px
    }
    &::-webkit-scrollbar-thumb {
      background:transparent;
      border-radius:4px
    }
    &:hover::-webkit-scrollbar-thumb {
      background:hsla(0,0%,53%,.4)
    }
    &:hover::-webkit-scrollbar-track {
      background:hsla(0,0%,53%,.1)
    }
  }
  .tablePaging{
    font-size: 18px;
    margin-left: 3%;
    display: inline-flex;
    cursor: pointer;
  }
	.tableSetting{
		//position: relative;
    margin: 0 10px 0 30px;
		// margin-left: 30px;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);

    .mainSelectClass {
      ::v-deep .el-input__inner { //如果你的style 加了scoped 需要加::v-deep
        background: url('~@/assets/img/main.svg') no-repeat; //引入icon
        background-size:  27px 27px; //这个是图片的大小，在这里不能直接设置width  height,设置宽高其实是select的宽高，图片可能会失真只设置宽度  高度auto也行
        background-position: 0px 0px; //在input中定位置  这两个参数是x  y坐标
        padding: 0 0 0 32px; //需要设置padding 把placeholder向右移
        box-sizing: border-box;
        font-size: 13px;
      }
    }
    .fromSelectClass {
      ::v-deep .el-input__inner { //如果你的style 加了scoped 需要加::v-deep
        background: url('~@/assets/img/from.svg') no-repeat; //引入icon
        background-size: 27px 27px; //这个是图片的大小，在这里不能直接设置width  height,设置宽高其实是select的宽高，图片可能会失真只设置宽度  高度auto也行
        background-position: 0px 0px; //在input中定位置  这两个参数是x  y坐标
        padding: 0 0 0 32px; //需要设置padding 把placeholder向右移
        box-sizing: border-box;
        font-size: 13px;
      }
    }
		.content{
			height: 100%;
			transition: .5s;
			.title{
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				padding-left: 10px;
				color:#4babf6;
				border-bottom: 1px solid rgba(219, 219, 219, 100);
			}
			.settingItem{
				padding: 6px 10px;
				font-size: 13px;
			}
      .vertically{
        display: flex;
        align-items: center;
      }
      .pr18{
        padding-right: 18px;
      }
			.border{
				border-bottom: 1px solid rgba(219, 219, 219, 100);
			}
			.tableBase{
				float: left;
				display: flex;
				align-items: center;
				// width: 50%;
				height: 36px;
				.baseTittle{
					color: rgba(54, 71, 96, 60);
					white-space: nowrap;
				}
				::v-deep .el-input-number{
					transform: scale(.8);
				}
				::v-deep .el-input input{
					padding: 0;
					width: 28px;
				}
				.isWeight{
					width: 42px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					text-align: center;
					cursor: pointer;
					margin-left: 6px;
					border: 1px solid rgba(220, 223, 230, 100);
					&.active{
						border: none;
						background-color: #4babf6;
						color: #FFFFFF;
					}
				}
			}
      .tableBtn{
        text-align: center;
      }
			::v-deep .el-color-picker{
				margin: 0 6px;
				transform: scale(.7);
			}
			::v-deep .el-radio-button--mini .el-radio-button__inner{
				padding: 7px;
			}
			.contentItem{
				margin-bottom: 10px;
				span:first-child{
					color: #8691A0;
				}
			}
			.el-radio-group{
				white-space: nowrap
			}
		}
		.width200{
			width: 200px;
		}
		.width0{
			width: 0px;
			overflow: hidden;
		}
		.hamburger {
			position: absolute;
			// right: -19px;
			//left: 0;
			top: 50%;
			transform: translate(-100%, -50%);
			cursor: pointer;
			display: inline-block;
			width: 18px;
			line-height: 36px;
			height: 36px;
			background-color: #E4E7ED;
			color: #fff;
			border-radius: 15px 0px 0px 15px;
			text-align: center;
			.el-icon-arrow-left{
				transition: .3s;
			}
			&:hover{
				background-color: #4BABF6;
			}
			.rotate{
				transform: rotate(180deg);
			}
		}
	}
  .cellIncrease{
    width: 100% !important;
    justify-content: space-between;
  }
  .headerTime{
    display: flex;
    border: 1px solid #EAECEF;
    height: 30px;
    border-radius: 4px;
    width: 40%;
    ::v-deep .el-input{
      padding-left: 10px;
    }
    .today{
      background-color: #EEEEEE;
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ::v-deep .el-input__inner{
      height:100%;
      width: 100% !important;
      border: none;
    }
  }
  .bottomLine{
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
  }
  ::v-deep .remove-arrow input::-webkit-outer-spin-button,
  ::v-deep .remove-arrow input::-webkit-inner-spin-button {
      -webkit-appearance: none;
  }
  ::v-deep .remove-arrow input[type="number"] {
      -moz-appearance: textfield;
  }
  .cursorPointer:hover{
    cursor: pointer;
  }
  .align-center{
    background-color: #FFFFFF;
    width: 82px;
    height: 25px;
    border: 1px solid #d5dae1;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    .select-color{
      background-color: #1890ff;
      color:#ffffff
    }
    .unSelect-color{
      background-color: #FFFFFF;
      color: #000000;
    }
    i{
      color: #000000;
      font-size: 17px;
      padding: 2px 2px 2px 2px;
      width: 33%;
    }
    i:before{
      display: flex;
      justify-content: center;
    }
    .font-center{
      width: 33%;
      height: 100%;
      align-items: center;
      display: flex;
      justify-content: center;
    }
    .font-center:hover{
      cursor: pointer;
    }
  }
  .alignBottom{
    height: 50%;
    align-items: flex-end;
  }
  .alignCenter{
    display: flex;
    justify-content: center;
  }
  .smallSquare1{
    width: 8px;
    height: 8px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 0.5px solid #ccc;
    border-bottom: 0.5px solid #ccc;
  }
  .smallSquare2{
    width: 8px;
    height: 8px;
    border-top: 1px solid #ccc;
    border-left: 0.5px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 0.5px solid #ccc;
  }
  .smallSquare3{
    width: 8px;
    height: 8px;
    border-top: 0.5px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 0.5px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .smallSquare4{
    width: 8px;
    height: 8px;
    border-top: 0.5px solid #ccc;
    border-left: 0.5px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .mediumSquare1{
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .mediumSquare2{
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .mediumSquare3{
    width: 8px;
    height: 8px;
    border-top: 1px solid #ccc;
    border-left: 2px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
  }
  .mediumSquare4{
    width: 8px;
    height: 8px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
  }
  .largeSquare1{
    width: 8px;
    height: 8px;
    border-top: 3px solid #ccc;
    border-left: 3px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
  }
  .largeSquare2{
    width: 8px;
    height: 8px;
    border-top: 3px solid #ccc;
    border-left: 2px solid #ccc;
    border-right: 3px solid #ccc;
    border-bottom: 2px solid #ccc;
  }
  .largeSquare3{
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-left: 3px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 3px solid #ccc;
  }
  .largeSquare4{
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
  }
</style>
